<template>
  <view class="component" :style="{display:labelPosition==='left'?'flex':'block'}">
    <view class="component-label" v-if="label"
          :style="{ paddingBottom:labelPosition==='top'? '8px':'',marginRight:labelPosition==='left'? '16px':'',}">
      {{ label }}
    </view>
    <view class="component-main" @click="onOpenPicker">
      <view class="component-main-text">
        <template v-if="value">
          <view class="component-main-text-date">{{ valueText[0] }}</view>
          <view class="component-main-text-time">{{ valueText[1] }}</view>
        </template>
        <template v-else>{{ placeholder }}</template>
      </view>
      <view class="component-main-icon">
        <image src="/@/static/images/rili.png"></image>
      </view>
    </view>

    <up-datetime-picker :maxDate="maxDate" :minDate="minDate" @close="onCloseDatePicker" @cancel="onCloseDatePicker"
                        @confirm="onConfirmDatePicker"
                        :show="datepickerVisible"
                        v-model="pickerValue"
                        mode="datetime"
    ></up-datetime-picker>
  </view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";
import {ref, watch} from 'vue'
import dayjs from "dayjs";

const props = defineProps({
  placeholder: {
    type: String,
    default: '请选择'
  },
  label: {
    type: String,
    default: ''
  },
  labelPosition: {
    type: String,
    default: 'left' //left top
  },
  value: {
    type: String,
    default: ''
  },
  minDate: {
    type: String,
    default: dayjs().subtract(50, 'years').valueOf()
  },
  maxDate: {
    type: String,
    default: dayjs().add(50, 'years').valueOf()
  }
})

watch(() => props.value, (val) => {
  valueText.value = val ? [val.split(' ')[0], val.split(' ')[1]] : []
  pickerValue.value = val ? dayjs(val).valueOf() : Date.now()
})

const emits = defineEmits(['change'])

const datepickerVisible = ref(false)
const pickerValue = ref(Date.now())
const valueText = ref([])


onLoad(() => {
  pickerValue.value = props.value ? dayjs(props.value).valueOf() : Date.now()
  valueText.value = props.value ? [props.value.split(' ')[0], props.value.split(' ')[1]] : []
})

const onCloseDatePicker = () => {
  datepickerVisible.value = false
}

const onOpenPicker = () => {
  datepickerVisible.value = true
}

const onConfirmDatePicker = (e) => {
  onCloseDatePicker()
  emits('change', dayjs(e.value).format('YYYY-MM-DD HH:mm'))
}
</script>

<style lang="scss" scoped>
.component {
  align-items: center;

  &-label {
    font-size: $fontSize;
    color: $textColor;
    line-height: 22px;
    padding-bottom: 8px;
    flex-shrink: 0;
  }

  &-main {
    width: calc(100% - 22px);
    background: $colorWhite;
    border: 1px solid $lineColor;
    border-radius: 2px;
    display: flex;
    height: 36px;
    padding: 0 10px;
    justify-content: space-between;

    &-text {
      display: flex;
      align-items: center;

      font-size: 14px;
      color: $textColorTitle;
      line-height: 22px;

      &-time {
        margin-left: 10px;
      }
    }

    &-icon {
      display: flex;
      align-items: center;

      image {
        width: 16px;
        height: 16px;
        vertical-align: bottom;
      }
    }
  }
}
</style>
